<style scoped>
.me {
  display:grid;
  position: relative;
  box-sizing: border-box;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-row-gap: 5px;
  grid-column-gap: 5px;
  grid-template-areas:"a a c""a a c""b b c";
  width:100%;
  height:100%;
  border: 1px solid #dcdee2;
  padding:5px;
  /*justify-content: center;*/
  /*align-items: center;*/
}
.hoverDiv {
  place-content:center center;
  display:flex;
  position: relative;
  /*flex-flow: wrap;*/
  justify-content: center;
  align-items: center;
}
.hoverDiv:hover{
  box-shadow: 0 1px 6px rgba(0,0,0,0.2);
  border-color: #eee;
}
</style>
<template>
  <div v-if="refreshed" class="me" :style="myStyle"  @click.right="$emit('rightClick',$event)">
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      refreshed:true,
      space:{
        width:'0',
        height:'0',
        x:3,
        y:3,
        tag:[0,1,2,3,4,5,6,7,8]
      },
      targetEl:null,
    }
  },
  props: {
    row: {default: () => '1fr 1fr 1fr'},
    column: {default: () => '1fr 1fr 1fr'},
    rowGap: {default: () => '5px'},
    columnGap: {default: () => '5px'},
    area:{default: () => "0 1 2,3 4 5,6 7 8"},
    data: {default: () => {return {}}},
    layout:{default: () => {return false}},
  },
  components: {},
  computed: {
    myStyle(){
      let style={};
      if(this.row!==''){
        style['gridTemplateRows']=this.row;
        this.space.y=this.row.split(' ').length;
      }else{
        this.space.y=0;
      }
      if(this.column!==''){
        style['gridTemplateColumns']=this.column;
        this.space.x=this.column.split(' ').length;
      }else{
        this.space.x=0;
      }
      if(this.rowGap!==''){
        style['gridRowGap']=this.rowGap;
      }
      if(this.columnGap!==''){
        style['gridColumnGap']=this.columnGap;
      }
      if(this.area!==''){
        style['gridTemplateAreas']="'"+this.area.replace(/,/g,"''")+"'";
        this.space.tag=this.tools.lodash(this.area.replace(/,/g," ").split(' '));
      }else{
        this.space.tag=['default'];
      }
      if(this.layout){
        style['border']='none';
        style['padding']='2px';
        style['width']='auto';
        style['height']='auto';
        style['justifyContent']='center';
        style['alignItems']='center';
      }
      return {
        ...this.$style,
        ...style
      }
    }
  },
  mounted() {

  },
  methods: {
    reLayout(){
      let style={};
      if(this.row!==''){
        style['gridTemplateRows']=this.row;
        this.space.y=this.row.split(' ').length;
      }else{
        this.space.y=0;
      }
      if(this.column!==''){
        style['gridTemplateColumns']=this.column;
        this.space.x=this.column.split(' ').length;
      }else{
        this.space.x=0;
      }
      if(this.rowGap!==''){
        style['gridRowGap']=this.rowGap;
      }
      if(this.columnGap!==''){
        style['gridColumnGap']=this.columnGap;
      }
      if(this.area!==''){
        style['gridTemplateAreas']="'"+this.area.replace(/,/g,"''")+"'";
        this.space.tag=this.lodash.uniq(this.area.replace(/,/g," ").split(' '));
      }else{
        this.space.tag=['default'];
      }
      this.additionalStyle=style;
    },
    getData(){
      let data={};
      for(let i=0;i<this.$el.children.length;i++){
        if(!Object.keys(data).includes(this.$el.children[i].dataset.spaceindex)){
          data[this.$el.children[i].dataset.spaceindex]=[];
        };
        for(let j=0;j<this.$el.children[i].children.length;j++){
          let item=this.data[this.$el.children[i].dataset.spaceindex].find(row=>row.id===this.$el.children[i].children[j].id);
          data[this.$el.children[i].dataset.spaceindex].push(item)
        }
      };
      return data;
    },
    setMask(id,opacity) {
      let dom=document.getElementById(id);
      // 先获取传入节点距离window的距离
      let left = dom.offsetLeft;
      let top = dom.offsetTop;
      let width = dom.offsetWidth;
      let height = dom.offsetHeight;
      opacity = opacity ||0.2;
      let newElem =document.createElement("div");
      newElem.style.cssText=`position:absolute;width:${width}px;height:${height}px;left:${left}px;top:${top}px;opacity:${opacity};background-color:#fff;`;
      newElem.setAttribute('id', 'zoomMask');
      newElem.setAttribute('data-id', id);
      document.getElementsByTagName('body')[0].appendChild(newElem);
    },
  }
}
</script>
